<%@ page import="com.hall.pojo.SysUser" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.codecoord.com" %>
<%@ page contentType="text/html;charset=UTF-8" import="java.util.ResourceBundle" %>
<head>
    <meta charset="utf-8">
    <title>信息修改</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <%--<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"><!--兼容性-->
    <meta name="renderer" content="webkit"><!--兼容性-->--%>
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/> <!--请求静态的html-->
    <meta http-equiv="Cache-Control" content="no-transform "/><!--禁止页面产生缓存-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-latest.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/dist/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/dist/layui.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/vue/css/Information.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/base.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common-less.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/moco.min.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/profile-less.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/axios-min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/live_meeting.css">
    <style>
        #navbar-default {
            background-color: #71BD71;
        }
        .aui-footer-fixed{
            display: none;
        }
    </style>
</head>

<body style="background-color: #f5f5f5;">
<div id="header">
    <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
         style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;border: 0;margin-bottom: 0">
        <div class="row">
            <div class="container-fluid" id="fluid">
                <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                    <a class="navbar-brand" href="javascript:history.back(-1)"
                       style="padding-left: 3px;">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                </div>
                <div class="col-lg-5 col-md-5 col-xs-5 col-sm-5" style=";padding-left: 11px;padding-top: 15px">
                    <span  style="font-size: 16px;color: #E3FFFF">编辑资料</span>
                </div>
            </div>
        </div>
    </nav>
</div>
<div id="headers" style="height: 55px"></div>
<div class="page-settings">
    <div class="setting pb10">
        <div class="contentBox">
            <div class="formBox">
                <div id="setting-profile" class="setting-wrap setting-profile">
                    <div class="wlfg-wrap clearfix" id="touxiang">
                        <label class="label-name" style="height: 65px;line-height: 65px">头像</label>
                        <div class="rlf-group" style="float: right;margin-right: 20px">
                            <div class="fl ml20 pr">
                                <div id="avator-btns" class="avator-btn-inner">
                                    <div class="avator-btn-wrap">
                                        <form id="form1" target="uploadtarget" action="##" method="post" fl ml20 pr
                                              enctype="multipart/form-data">
                                            <img class="fl avator-img" id="showupimg" <%--头像暂时不设置回显，部署到服务器后再设置--%>
                                                 src="/bokeupload${sysuser.photo}" alt="头像" width="53" height="53"
                                                 onerror="this.src='${pageContext.request.contextPath}/resource/images/login-qunai.png'">
                                            <div class="filee" id="file1"><input id="uploadimg" type="file"
                                                                                 name="file"
                                                                                 accept="image/png, image/jpeg, image/gif, image/jpg"
                                                                                 class="upload-input"
                                                                                 onchange="fileChange(event)"
                                                                                 value="请选择图片">
                                                <div class="fileerrorTip1"></div>
                                                <div class="showFileName1" style="width: 70px;text-align: center"></div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form id="profile">
                        <div  class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="loginname">登录账号</label>
                            <div class="rlf-group inputset">                   <%--只读--%>
                                <input type="text" name="loginName" id="loginname"  disabled="true" readonly="readonly"
                                       autocomplete="off" data-validate="require-loginname"
                                       class="moco-form-control input-value" value="${sysuser.loginName}"
                                       placeholder=""/>
                            </div>
                        </div>

                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="name">真实姓名</label>
                            <div class="rlf-group inputset">
                                <input type="text" name="name" id="name" autocomplete="off"
                                       data-validate="require-nick" class="moco-form-control input-value"
                                       value="${sysuser.name}" onchange=clearText(1)
                                       placeholder="请输入姓名"/>
                            </div>
                        </div>

                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="province-select">用户类型</label>
                            <div class="rlf-group profile-address">
                                <select id="province-select" class='moco-form-control' name="usertype"
                                        hidefocus="true" style="height: 34px;direction: rtl">
                                    <c:if test="${sysuser.usertype eq 'doctor'}">
                                        <option value="doctor">医生</option>
                                    </c:if>
                                    <c:if test="${sysuser.usertype eq 'assistant'}">
                                        <option value="assistant">医助</option>
                                    </c:if>
                                    <c:if test="${sysuser.usertype eq 'patient'}">
                                        <option value="patient">患者</option>
                                    </c:if>
                                    <c:if test="${sysuser.usertype eq 'admin'}">
                                        <option value="admin">管理员</option>
                                    </c:if>
                                    <option value="doctor">医生</option>
                                    <option value="assistant">互联网医疗专员</option>
                                    <option value="patient">患者</option>
                                    <option value="admin">管理员</option>
                                </select>
                            </div>
                        </div>
                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="companyId">医院名称</label>
                            <div class="rlf-group" style="width: 60%;margin-top: 5px">
                                <input type="text" name="companyId" id="companyId" autocomplete="off"
                                       data-validate="require-companyId" onchange=clearText(2)
                                       class="moco-form-control" value="${sysuser.companyId}"
                                       placeholder="请输入医院"/>
                            </div>
                        </div>
                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="officeId">科室</label>
                            <div class="rlf-group inputset">
                                <input type="text" name="officeId" id="officeId" autocomplete="off"
                                       data-validate="require-office" onchange=clearText(3)
                                       class="moco-form-control" value="${sysuser.officeId}"
                                       placeholder="请输入科室"/>
                            </div>
                        </div>
                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="province-select"
                                   style="margin-right:8px ">职称</label>
                            <select class='moco-form-control' id="city-select" name="level" hidefocus="true"
                                    style="height: 34px;direction: rtl">
                                <option value="${sysuser.level}">${sysuser.level}</option>
                                <option value="主任医师">主任医师</option>
                                <option value="副主任医师">副主任医师</option>
                                <option value="管理员">管理员</option>
                                <option value="金牌医助">金牌医助</option>
                            </select>
                        </div>
                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="major">擅长领域</label>
                            <div class="rlf-group inputset">
                                <input type="text" name="major" id="major" autocomplete="off"
                                       data-validate="require-major" class="moco-form-control input-value"
                                       value="${sysuser.major}" placeholder="请输入个人擅长"/>
                            </div>
                        </div>
                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="phone">手机</label>
                            <div class="rlf-group inputset">                                <%--限制只能输入手机号11位--%>
                                <input type="text" name="phone" id="phone" maxlength="11"
                                       onkeyup="value=value.replace(/[^\d]/g,'')" onchange=clearText(3)
                                       autocomplete="off" data-validate="require-phone"
                                       class="moco-form-control input-value" value="${sysuser.phone}"
                                       placeholder="手机号"/>
                            </div>
                        </div>

                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="wechat">微信</label>
                            <div class="rlf-group inputset">
                                <input type="text" name="wechat" id="wechat" autocomplete="off"
                                       data-validate="require-wechat" class="moco-form-control input-value"
                                       value="${sysuser.wechat}" placeholder="微信号"/>
                            </div>
                        </div>

                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="qrcode">二维码名片</label>
                            <div class="rlf-group inputset">
                                <input type="text" name="qrcode" id="qrcode" autocomplete="off"
                                       data-validate="require-qrcode" class="moco-form-control input-value"
                                       value="${sysuser.qrcode}" placeholder=""/>
                            </div>
                        </div>
                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="id">ID</label>
                            <div class="rlf-group inputset">    <%--只读--%>
                                <input type="text" name="id" id="id" readonly="readonly" autocomplete="off"
                                       data-validate="require-userid" class="moco-form-control input-value"
                                       value="${sysuser.id}" placeholder=""/>
                            </div>
                        </div>
                        <div class="wlfg-wrap clearfix my_info">
                            <label class="label-name" for="txta1" style="height: 45px;line-height: 47px">基本简历</label>
                            <div class="rlf-group inputset">
                                <div class="pr">
                                    <%--为了兼容大部分浏览器，故本元素体添加了多个方法--%>
                                    <textarea name="resume" id="txta1" rows="5"
                                              class="noresize js-sign moco-form-control" maxlength="126"
                                              onchange="this.value=this.value.substring(0, 126)"
                                              onkeydown="this.value=this.value.substring(0, 126)"
                                              onkeyup="this.value=this.value.substring(0, 126)">${sysuser.resume}</textarea>
                                </div>
                            </div>

                        </div>
                        <%--新增--%>
                        <div class="wlfg-wrap clearfix my_info" style="border-bottom: none;padding-top: 7px;position: relative;height: 50px">
                            <div class="rlf-group" style="position:absolute; right: 10px">
                                <span id="profile-submit" hidefocus="true" aria-role="button"
                                                  class="rlf-btn-green btn-block profile-btn" onclick="updateone()"
                                                  style="display: inline-block;">保存</span>
                                <span id="profile-clear" hidefocus="true" aria-role="button"
                                      class="rlf-btn-green btn-block profile-btn" onclick="textClear()"
                                      style="display: inline-block;background-color: #5bc0de">清除</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<br>
<br>
<br>
<br>
<footer class="aui-footer aui-footer-fixed">

    <a href="/boke/index.jsp" class="aui-tabBar-item " style="text-decoration:none;">
        <span class="aui-tabBar-item-icon"><i class="icon icon-loan"></i></span>
        <span class="aui-tabBar-item-text">首页</span></a>

    <a href="/bokehall/hall/allHall" class="aui-tabBar-item aui-tabBar-item-active">
        <span class="aui-tabBar-item-icon"><i class="icon icon-credit"></i></span>
        <span class="aui-tabBar-item-text">会诊</span></a>

    <a href="/boke/msg/chatfriend.jsp" class="aui-tabBar-item ">
        <span class="aui-tabBar-item-icon"><i class="icon icon-ions"></i></span>
        <span class="aui-tabBar-item-text">消息</span></a>

    <a href="/boke/me.jsp" class="aui-tabBar-item "><span
            class="aui-tabBar-item-icon"><i class="icon icon-mine"></i></span>
        <span
                class="aui-tabBar-item-text">我的
        </span></a>
</footer>
<script>
    var oldform;
    $(document).ready(function () {
        //页面加载先实例化一次表单对象数据
        closeNag();
        $("#header").hide();//隐藏导航
        $("#headers").css("height","0");//隐藏导航
    });
    //监听和控制基本简历输入框字数
    $("#txta1").on("propertychange input", function () {
        var $this = $(this),
            _val = $this.val(),
            count = "";
        if (_val.length >= 126) {
            $this.val(_val.substring(0, 126));
        }
        count = 126 - $this.val().length;
        $("#text-count").text(count);
    });
    //上传头像
    function upload() {
        var data = new FormData($("form")[0])
        data.append("id",$("#id").val().trim());
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/my/uploadImage",
            data: data,
            contentType: false,
            processData: false,
            cache: false,
            success: function (result) {
                layer.msg("修改成功",{ shift: -1, time: 1000 },function () {
                    window.location.href="/boke/me.jsp"
                });
                /*returnlogin();*/
            },
            error: function () {
                layer.msg("头像修改失败,请重试")
            }
        })
    }

    //在input文件域内容改变时实时渲染图片到img标签显示
    $('#uploadimg').change(function () {
        var file = $('#uploadimg').get(0).files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            console.log(e);
            $('#showupimg').get(0).src = e.target.result;
        }
    })

    //修改个人资料
    function updateone() {
        let form = new FormData();
        form.append("id",$("#id").val().trim());
        form.append("loginname", $("#loginname").val().trim());
        form.append("name", $("#name").val().trim());
        form.append("usertype", $("#province-select").val().trim());
        form.append("companyId", $("#companyId").val().trim());
        form.append("officeId", $("#officeId").val().trim());
        form.append("level", $("#city-select").val().trim());
        form.append("resume", $("#txta1").val().trim());
        form.append("major", $("#major").val().trim());
        form.append("phone", $("#phone").val().trim());
        form.append("wechat", $("#wechat").val().trim());
        form.append("qrcode", $("#qrcode").val().trim());
        axios({
            method: 'post',
            url: '${pageContext.request.contextPath}/my/updateOne',
            data: form
        })
            .then(function (r) {
                if (r.data.code === 1) {
                    layer.msg("修改成功",{ shift: -1, time: 1000 },function () {
                        window.location.href="/boke/me.jsp"
                    });
                    /*returnlogin();*/
                }else{
                    layer.msg(r.data.msg);
                }
            });
    }

    //重置输入的红色警告文字提醒
    function clearText(i) {
        //调用同一个方法，通过参数来控制元素
        if (i == 1) {
            $("#name-p").text('');
        } else if (i == 2) {
            $("#companyId-p").text('');
        } else if (i == 3) {
            $("#officeId-p").text('');
        } else if (i == 4) {
            $("#phone-p").text('');
        }
    }

    //提醒input file的文件上传格式，以及文件合法性的简单验证方法
    $("#file1").on("change", "input[type='file']", function () {
        var filePath = $(this).val();
        if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1 || filePath.indexOf("jpeg") != -1) {
            $(".fileerrorTip1").html("").hide();
            let arr = filePath.split('\\');
            let fileName = arr[arr.length - 1];
            let temp1 = fileName.replace(/[^\x00-\xff]/g, "**");
            let temp2 = temp1.substring(0, 9);
            let sub_length = 9;
            let x_length = temp2.split("\*").length - 1;
            let hanzi_num = x_length / 2;
            sub_length = sub_length - hanzi_num;
            fileName = fileName.replace(/\ +/g, "");
            fileName = fileName.replace(/\n|\r/g, "");
            let res = fileName.substring(0, sub_length);
        } else {
            /*文件域验证操作，实现了拦截上传除了jpg.png.jpeg外格式的文件,如果不匹配格式，则清空文件选择器的文件*/
            $(".upload-input").val(null);
            return false
        }
    });

    //清除按钮
    function textClear() {
        layer.confirm('确定清空所有然后重填?(不点击保存,数据不会清空,可重新进入该页面)', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $("#name").val('');
            $("#companyId").val('');
            $("#officeId").val('');
            $("#txta1").val('');
            $("#major").val('');
            $("#phone").val('');
            $("#wechat").val('');
            $("#qrcode").val('');
            layer.closeAll('dialog');
        }, function(){
            layer.closeAll('dialog');
            return false;
        });

    }
    function fileChange(e) {
        upload()
    }
    $('#txta1').click(function () {
        textarer()
    })
    function textarer() {
        layer.prompt({
            title: '个人简介', formType: 2,
            area: ['250px', '180px'],
            btn: ['确定', '取消'],
            maxlength: 125,
            value:$("#txta1").val(),
            yes: function (index, commentsInput){
                layer.close(index);
                $("#txta1").val(commentsInput.find(".layui-layer-input").val());
            }});
    }
    function returnlogin() {
        layer.alert('修改成功,请您重新登录', {
            time: 3*1000
            ,success: function(layero, index){
                var timeNum = this.time/1000, setText = function(start){
                    layer.title((start ? timeNum : --timeNum) + ' 秒后重新登录', index);
                };
                setText(!0);
                this.timer = setInterval(setText, 1000);
                if(timeNum <= 0) clearInterval(this.timer);
            }
            ,end: function(){
                clearInterval(this.timer);
                window.location.href = '/boke/login_exit.jsp';
            }
        });
    }
</script>
<script src="${pageContext.request.contextPath}/static/js/nag.js"></script>
</body>
</html>
